<!--
/**
* Author: tt
* Date: 2023年5月16日
* Desc: 套票底部支付及明细
*/
-->
<template>
  <view class="order-footer flex-col home-wrap">
    <view :class="{ showMore: showMore, closeMore: !showMore }">
      <view class="flex-b-m">
        <view class="action-sheet-title fs32 mb20"> 价格明细 </view>
        <view class="mb20" @click.stop="close()">
          <u-icon size="22" name="close" color="#ADB5B7"></u-icon>
        </view>
      </view>
      <view class="flex-b-m mb10">
        <view> {{ name }} x{{ num }} </view>
        <view>￥ {{ totalPrice }} </view>
      </view>
      <view v-if="coupons && coupons.length > 0" class="flex-b-m mb10">
        <view> {{ coupons[0].couponName }} </view>
        <view class="fc-yellow">-￥ {{ coupons[0].mallReduceMoney }} </view>
      </view>
    </view>
    <view class="flex-b-m">
      <price
        :price="getNeedPrice"
        unit-size="28"
        price-size="42"
        custom-class="txt"
        color="#FFB415"
      ></price>
      <view class="footer-detail flex-s-m">
        <view @click="openPlan" class="flex-right flex flex-m">
          <view class="txt"> 明细 </view>
          <view :class="{ arrow_down: showMore }">
            <u-icon size="12" name="arrow-down" color="#ADB5B7"></u-icon>
          </view>
        </view>
        <view class="btn-toPay" :class="extPayClass" @click="handlePay">
          立即付款
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import Price from '@/components/Price'
  export default {
    name: 'GoodsPayFooter',
    components: { Price },
    props: {
      value: Boolean,
      coupons: [Array, Object], //我优惠券选择
      name: String,
      num: [String, Number],
      totalPrice: [String, Number]
    },
    data() {
      return {}
    },
    mounted() {
      this.init()
    },
    computed: {
      showMore: {
        set(v) {
          this.$emit('input', v)
        },
        get() {
          return this.value
        }
      },
      getNeedPrice() {
        let totalPrice = this.totalPrice
        if (this.coupons && this.coupons.length > 0) {
          totalPrice -= this.coupons[0].mallReduceMoney
        }
        return totalPrice > 0 ? totalPrice : 0
      }
    },
    methods: {
      init() {},
      close() {
        this.$emit('input', false)
      },
      openPlan() {
        this.$emit('showMore')
      },
      handlePay() {
        console.log('handlePayhandlePay')
        this.$emit('goPay')
      }
    }
  }
</script>
<style lang="scss">
  .order-footer {
    z-index: 110;
    width: 100%;
    background: #fff;
    padding: 32rpx 30rpx 32rpx 33rpx !important;
    border-radius: 18rpx 18rpx 0 0;
    position: fixed;
    bottom: 0;
    .btn-toPay {
      width: 276rpx;
      height: 100rpx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 18rpx;
      color: #fff;
      text-align: center;
      line-height: 100rpx;
      font-size: 36rpx;
      margin-left: 26rpx;
      &.disabledPay {
        background: #dfdfdf;
      }
    }
    .showMore {
      background: #fff;
      min-height: 135rpx;
      height: auto;
      transition: height 0.5s;
      z-index: 120;
      padding-bottom: 10rpx;
    }
    .closeMore {
      background: #fff;
      height: 0;
      overflow: hidden;
      transition: height 0.5s;
    }
    .footer-detail {
      .txt {
        color: #adb5b7;
        font-size: 26rpx;
      }
    }
  }
</style>
